<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>artMessage demo</title>
    <link rel="stylesheet" href="./demo.css">
    <link rel="stylesheet" href="../src/artMessage.css">

</head>
<body>

<span>artMessage</span> ©<a href="https://github.com/liyu365">liyu</a>

<h1>支持五种消息图标</h1>
<button onclick="artMessage({message:'success',type:'success'});">success</button>
<button onclick="artMessage({message:'error',type:'error'});">error</button>
<button onclick="artMessage({message:'warn',type:'warn'});">warn</button>
<button onclick="artMessage({message:'info',type:'info'});">info</button>
<button onclick="artMessage({message:'loading',type:'loading'});">loading</button>
<button onclick="artMessage({message:'无图标'});">无图标</button>

<h1>在页面中央显示</h1>
<button onclick="artMessage({message:'此消息将在页面中央显示',type:'success',center:true});">此消息将在页面中央显示</button>

<h1>设置消息的停留时间为10s</h1>
<button onclick="artMessage({message:'此条消息会停留5s后消失',type:'success',duration:'5'});">此条消息会停留5s后消失</button>

<h1>为消息设置遮罩层</h1>
<button onclick="artMessage({message:'为消息设置遮罩层',type:'success',mask:true});">为消息设置遮罩层</button>

<h1>设置消息的alone属性为true，会让此条消息消失之前，其它消息都无法显示</h1>
<button onclick="artMessage({message:'在我消失之前无法再显示其它消息',type:'success',alone:true});">在我消失之前无法再显示其它消息</button>

<h1>在回调中对消息进行关闭</h1>
<button id="starLoading">开始加载</button>
<script>
    document.getElementById('starLoading').onclick = function () {
        var msgObj = artMessage({
            message: '加载中...',
            type: 'loading',
            duration: 0,
            mask: true,
            center:true,
            open: function () {
                console.log('open');
            },
            close: function () {
                console.log('close');
            }
        });
        setTimeout(function () {
            if(msgObj){
                alert('我要被关闭了！');
                msgObj.out();
            }
        }, 1000)
    };
</script>


<script>
    //防止浏览器不支持console报错
    if (!window.console) {
        window.console = {};
        var funs = ["profiles", "memory", "_commandLineAPI", "debug", "error", "info", "log", "warn", "dir", "dirxml", "trace", "assert", "count", "markTimeline", "profile", "profileEnd", "time", "timeEnd", "timeStamp", "group", "groupCollapsed", "groupEnd"];
        for (var i = 0; i < funs.length; i++) {
            console[funs[i]] = function () {
            };
        }
    }
</script>
<script src="../src/artMessage.js"></script>
</body>
</html>